<template>
	<view class="container">
		<view class="logo_new">
			<image class="logo_image_new" src="@appstatic/user/user_icon_toplogo.png"></image>
		</view>
		<view style="padding-left: 40.5px; padding-top: 25.73px;padding-bottom: 27px;">
			<text style="font-weight: 300;font-size: 24px;line-height: 34px;">
				注册
			</text>
		</view>

		<view class="content">
			<!-- 注册表单 -->
			<view class="register-form">
				<view class="row">
					<image style="width: 14px;height: 14px;padding-left: 19px;padding-right: 11px;"
						src="@appstatic/user/user_icon_name.png" mode="aspectFit">
					</image>
					<text style="margin-right: 10px;width: 48px;">姓名</text>
					<input class="register-form-input" :focus="true" :value="name" placeholder="请输入姓名"
						@input="nameInput" placeholder-class="phcolor" style="margin-right: 10px;">
					</input>
				</view>

				<view class="input_space_margin_top_40" style="margin-top: 24px; "></view>

				<view class="row">
					<image style="width: 14px;height: 14px;padding-left: 19px;padding-right: 11px;"
						src="@appstatic/user/user_icon_mobile.png" mode="aspectFit">
					</image>
					<text style="margin-right: 10px;width: 48px;">性别</text>
					<input disabled="true" @click="sexChoose" onfocus="this.blur();" class="register-form-input"
						:focus="false" :value="sex" placeholder="请选择性别" placeholder-class="ph_msgcolor">


					</input>


				</view>

				<view class="input_space_margin_top_40" style="margin-top: 24px; "></view>

				<button v-if="phoneNum==''" class="button_row" open-type='getPhoneNumber'
					@getphonenumber='getPhoneNumber'>

					<image style="width: 14px;height: 14px;padding-left: 19px;padding-right: 11px;"
						src="@appstatic/user/user_icon_mobile_register.png" mode="aspectFit"></image>
					<text>手机号</text>
					<text style="margin-left:10px ;">{{phoneNum}}</text>

				</button>



				<view v-else class="row">
					<image style="width: 14px;height: 14px;padding-left: 19px;padding-right: 11px;"
						src="@appstatic/user/user_icon_mobile_register.png" mode="aspectFit"></image>
					<text>手机号</text>
					<text style="margin-left:10px ;">{{phoneNum}}</text>
				</view>




				<view class="input_space_margin_top_40" style="margin-top: 24px; "></view>



				<view class="row" style="justify-content: space-between;" @click="toArea">
					<view class="">
						<image style="width: 14px;height: 14px;padding-left: 19px;padding-right: 11px;"
							src="@appstatic/user/user_icon_city.png" mode="aspectFit"></image>
						<text style="48px">城市</text>
						<text style="padding-left: 26px;">{{area}}</text>
					</view>
					<view style="display: flex;align-items: center;">
						<image style="width: 9px;height: 18px;" src="@appstatic/user/user_icon_link.png"
							mode="aspectFit"></image>
					</view>

				</view>
			</view>


			<!-- 注册按钮 -->
			<view v-if="name!=='' && sex!=='' && area!==''" @click="complete">
				<button class="register-button" hover-class="btn-style-hover" plain="true">
					完成注册
				</button>
			</view>


			<view v-if="name=='' || sex=='' || area==''">
				<button class="register-button-uncomplete" hover-class="btn-style-hover" plain="true">
					完成注册
				</button>
			</view>
		</view>

		<view class="jurisdictionView">
			<view class="jurisdiction">
				<view>
					<checkbox-group @change="onCheckChange">
						<checkbox value="vvv" :checked="checked" style="transform: scale(0.46);"></checkbox>
					</checkbox-group>
				</view>
				<view class="checkbox-test">
					我已阅读并同意方机车
				</view>
				<view class="text" @click="agreementTouched" style="color: #EA5404;">
					《用户服务协议》
				</view>
				<view class="checkbox-test">、</view>
				<view class="text" @click="privateTouched" style="color: #EA5404;">
					《隐私政策》
				</view>
			</view>

		</view>

		<u-action-sheet :show="showSex" :actions="actions" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	const app = getApp();
	const util = require("@utils/util.js");
	const network = require("@manager/network-manager.js");
	const dialog = require("@utils/dialog.js");
	export default {
		data() {
			return {
				text: '微信登录',
				userInfo: null,
				name: '',
				sex: '',
				province: '',
				area: '',
				showSex: false,
				actions: [{
						name: '男',
					},
					{
						name: '女',
					}
				],
				checked: false,
				phoneNum: '',
				SessionKey: '',
				openid: '',
				encryptedData: '',
				iv: '',
				userInfo: null,
				avatarUrl: '',
				nickName: '',
				cityCode: '',
				provinceCode: '',
				activityId: '',
				storeId: '',
				isPopularize: false
			};
		},

		onLoad(e) {
			this.phoneNum = e.mobile
			this.getUnionid();
			if (e.isPopularize == "true") {
				this.isPopularize = true
				this.activityId = e.activityId
				this.storeId = e.storeId
			}

			// this.getUserProfile()
		},

		onShow: function(e) {
			this.userInfo = app.globalData.userInfo;
			if (this.userInfo != null && this.userInfo.phone != null && this.userInfo.phone != '') {
				this.phoneNum = this.userInfo.phone
			}

		},
		methods: {
			getUserProfile() {
				var that = this;
				wx.showModal({
					title: "提示",
					content: "是否允许获取微信昵称和头像？",
					success(res) {
						if (res.confirm) {
							wx.getUserProfile({
								desc: "用于完善用户资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
								success: (res) => {
									that.avatarUrl = res.userInfo.avatarUrl,
										that.nickName = res.userInfo.nickName,

										console.log("头像" + that.avatarUrl)
									console.log("昵称" + that.nickName)
									wx.setStorageSync("userInfo", res.userInfo);
									let setNowTime = Date.now() + 3600 * 1000 * 24 *
										30; // 我设置了30天有效期，你们可以自己改
									wx.setStorageSync("userInfoStorageTime", setNowTime);
								},
								fail: function(err) {
									console.log(err);
								},
							});
						}
					},
				});
			},


			getPhoneNumber: function(e) {


				console.log(e.detail.errMsg == "getPhoneNumber:ok");
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.encryptedData = e.detail.encryptedData
					this.iv = e.detail.iv
					this.getUserInfo()
				}

			},



			getUserInfo: function() {
				var uri = app.globalData.config.interfaces.URL_WECHAT_GETUSERINFO;
				var params = {
					"encryptedData": this.encryptedData,
					"sessionkey": this.SessionKey,
					"iv": this.iv
				};
				network.post(uri, params, "form").then(res => {
					console.log(res);
					if (res.code == 200) {
						this.phoneNum = res.data.phoneNumber;
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				})
			},



			//获取SessionKey
			getUnionid: function() {
				wx.login({
					success: wxres => {
						console.log('code:' + wxres.code);
						var uri = app.globalData.config.interfaces.URL_WECHAT_GETUNIONID;
						var params = {
							"code": wxres.code,
						};
						network.get(uri, params, "form").then(res => {
							console.log(res);
							if (res.code == 200) {
								this.openid = res.data.openid;
								this.SessionKey = res.data.session_key;
								uni.setStorageSync('openId', this.openid)

							} else {
								setTimeout(() => {
									uni.showToast({
										title: res.message,
										duration: 3000,
										icon: 'none'
									})
								}, 500)
							}
						})
					}
				})
			},




			//性别选择
			sexChoose: function() {
				this.showSex = true
			},
			sexSelect(e) {
				this.sex = e.name
			},
			nameInput: function(e) {
				this.name = e.detail.value
			},
			sexInput: function(e) {
				this.sex = e.detail.value
			},
			cityInput: function(e) {
				this.city = e.detail.value
			},
			toArea: function() {
				uni.navigateTo({
					url: "/module_my/pages/myArea/myArea",
				});
			},
			onCheckChange: function(e) {
				this.checked = e.detail.value.length > 0;
			},
			agreementTouched: function(e) {
				uni.navigateTo({
					url: '/pages/user/agreement'
				});
			},
			privateTouched: function(e) {
				uni.navigateTo({
					url: '/pages/user/private'
				});
			},

			complete: function() {
				var that = this;
				if (!this.checked) {
					uni.showToast({
						title: "请查看并同意协议后继续",
						duration: 3000,
						icon: 'none'
					})
					return;
				}
				var uri = app.globalData.config.interfaces.URL_WECHAT_GETAPPLOGINBYAUTO;
				// var sexCode = ""
				// if (that.sex == "男") {
				// 	sexCode = 1
				// } else if (that.sex == "女") {
				// 	sexCode = 2
				// }


				var params;
				if (that.isPopularize == false) {
					params = {
						"userimages": that.avatarUrl,
						"wechat_name": that.nickName,
						"username": that.name,
						"sex": that.sex,
						"wechatCountry": '',
						"wechatProvince": that.province,
						"wechatCity": that.area,
						"phoneNumber": that.phoneNum,
						"isfrom": 3, //1.pc；2.移动端；3.小程序；4.app
						"openid": that.openid,
						"unionid": this.SessionKey,
						"cityCode": this.cityCode,
						"provinceCode": this.provinceCode
					};

				}else{
					params = {
						"userimages": that.avatarUrl,
						"wechat_name": that.nickName,
						"username": that.name,
						"sex": that.sex,
						"wechatCountry": '',
						"wechatProvince": that.province,
						"wechatCity": that.area,
						"phoneNumber": that.phoneNum,
						"isfrom": 3, //1.pc；2.移动端；3.小程序；4.app
						"openid": that.openid,
						"unionid": this.SessionKey,
						"cityCode": this.cityCode,
						"provinceCode": this.provinceCode,
						"activityId": that.activityId,
						"storeId": that.storeId,
						
					};
				}





				console.log("1头像" + that.avatarUrl)
				console.log("1昵称" + that.nickName)
				network.post(uri, params, "json", null, true).then(res => {
					console.log(res);
					if (res.code == 200) {
						app.saveToken(res.data.token);
						//登录成功没返回用户信息 接口再次获取下
						that.getUserWithMobile(that.mobile);
						// this.$fire.$emit("loginSuccess");
					} else {
						setTimeout(() => {
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}, 500)
					}
				})
			},
			//获取用户信息
			getUserWithMobile: function(mobile) {
				var params = {
					"phone": this.phoneNum
				};
				const header = {};
				var that = this;
				network.get(app.globalData.config.interfaces.URL_SYS_LOAD_USERINFO, params, "form", header).then(
					res => {
						if (res.code == 200) {
							app.saveUser(res.data);
							// uni.navigateBack({
							// 	changed: true
							// }); //返回上一页
							uni.switchTab({
								url: "/pages/community/community",
								fail(err) {
									console.log(err, 'err')
								}
							})
						} else {
							setTimeout(() => {
								uni.showToast({
									title: res.message,
									duration: 3000,
									icon: 'none'
								})
							}, 500)
						}
					}).catch(res => {
					setTimeout(() => {
						uni.showToast({
							title: res.errMsg,
							duration: 3000,
							icon: 'none'
						})
					}, 500)
					console.error(res);
				});
			},
		}
	}
</script>

<style>
	.container {
		background: url("@appstatic/user/user_icon_bottomlogo.png") bottom right no-repeat;
		background-size: 323px, 287px;
		width: 100vw;
		height: calc(100vh - 44px);
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100vh - 314px);
	}

	.row {
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1px solid #ECEDEE;
		height: 42px;
		width: 327px;
		margin: auto;
		font-size: 16px;
		font-weight: 400;
		line-height: 22.4px;
		color: #ADB0AE
	}

	.logo_new {
		margin-top: 0px;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.logo_image_new {
		width: 72px;
		height: 86.33px;
		margin-left: 40px;
		margin-top: 40px;
	}

	.register-form-input {
		font-size: 28rpx;
		color: #4F4F4F;
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 0rpx;
		/* text-align: right; */
		width: calc(100% - 48px - 14px - 11px - 32px);
	}

	.shortinput {
		width: calc(100% - 20rpx - 173rpx)
	}

	.canvas {
		width: 85px;
		background-color: #f7faff;
	}

	.login-image {
		width: 100%;
		height: 420rpx;
	}

	.register-image>image {
		margin-left: calc((100% - 353rpx) / 2);
		margin-top: 85rpx;
		width: 353rpx;
		height: 238rpx;
	}

	.register-button {
		line-height: 80rpx;
		height: 42px;
		width: 335px;
		margin: auto;
		border: none;
		border-radius: 2px;
		font-size: 16px;
		font-weight: 400;
		margin-top: 56px;
	}

	.register-button-uncomplete {
		line-height: 80rpx;
		height: 42px;
		width: 335px;
		margin: auto;
		border: none;
		border-radius: 2px;
		font-size: 16px;
		font-weight: 400;
		margin-top: 46px;
	}

	.logo_mode {
		width: 40px;
		height: 40px;
		margin: 10px;
	}

	button.register-button[plain] {
		border: 0;
		background-color: #EA5404;
		color: #ffffff;
		font-size: 16px;
		font-weight: 400;
	}

	button.register-button-uncomplete[plain] {
		border: 0;
		background-color: #EDEDED;
		color: #ADB0AE;
		font-size: 16px;
		font-weight: 400;
	}

	.footOpration {
		border-bottom: 0px;
		height: 75rpx;
		margin-top: 0rpx;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
	}

	.logo {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.logo_image {
		height: 100rpx;
		width: 282rpx;
		margin-top: 152rpx;
	}

	.logo_welcome {
		color: #333333;
		font-size: 36rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.area_code {
		color: #333333;
		font-size: 28rpx;
		width: 20%;
	}

	.phcolor {
		color: #BDBDBD;
		font-size: 16px;
		font-weight: 400;
	}

	.ph_msgcolor {
		color: #BDBDBD;
		font-size: 16px;
		font-weight: 400;
	}

	.text {
		font-size: 10px;
	}


	.jurisdictionView {
		display: flex;
		flex-direction: column;
		/* height: calc(100vh - 647px); */
		position: absolute;
		bottom: 20px;
		width: 100vw;

	}

	.jurisdiction {
		left: 100rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: center;
		font-size: 10px;
		margin-top: 20px;


	}

	.checkbox-test {
		font-size: 10px;
		color: #BDBDBD;
	}

	.button_row::after {
		border: none;
	}

	.button_row {
		background-color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 42px;
		width: 327px;
		margin: auto;
		font-size: 16px;
		font-weight: 400;
		line-height: 22.4px;
		color: #ADB0AE;
		border-bottom: 1px solid #ECEDEE;
		border-radius: 0;
		padding-left: 0px;
		padding-right: 0px;
	}
</style>
